<template>
  <view class="classify-detail" :style="{paddingTop:statusBarHeight+'px'}">
	<uni-nav-bar  :border="false" left-icon="left" :title="title" @clickLeft="back" />
    
	<view class="content">
		<image @click="goDetail(item._id,wallpaperList.map(_item=>_item._id))" v-for="item in wallpaperList" :key="item._id" :src="item.smallPicurl" mode=""></image>
	</view>
	
	<view class="load-more">
	  <uni-load-more :status="status"></uni-load-more>
	</view>
  </view>
</template>

<script setup>
import { request } from '../../utils';
  const back = () => {
    uni.navigateBack()
  }
  
  const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)
  const status = ref('more')
  const title = ref('')
  const type = ref()
  const searchForm = reactive({
	  classId:'',
	  page:1,
	  pageSize:15
  })
  
  const wallpaperList = ref([])
  
  /**
   * 进入壁纸详情页面
   */
  const goDetail = (id,ids)=>{
	  // uni.navigateTo({
	  // 	url:`/pages/detail/detail?id=${id}&ids=${ids}`
	  // })
	  
	  uni.setStorageSync('previewList',wallpaperList.value)
	  
	  uni.navigateTo({
	  	url:`/pages/preview/preview?id=${id}`
	  })
  }
  
  const getWallpaperList = ()=>{
	  status.value='loading'
	  
	  if(type.value){
		  request({
		  	  url:'https://tea.qingnian8.com/api/bizhi/userWallList',
		  	  data:{
		  		  type:type.value,
		  		  pageNum:searchForm.page,
		  		  pageSize:searchForm.pageSize
		  	  }
		  }).then(res=>{
		  	if(res.data.length===0 ) {
		  	  status.value = 'no-more'
		  	  return 
		  	} 
		  	wallpaperList.value.push(...res.data)
		  	searchForm.page ++
		  	status.value = res.data.length < searchForm.pageSize ? 'no-more': 'more'
			
		  })
		  
		  return 
	  }
	request({
		  url:'https://tea.qingnian8.com/api/bizhi/wallList',
		  data:{
			  classid:searchForm.classId,
			  pageNum:searchForm.page,
			  pageSize:searchForm.pageSize
		  }
	}).then(res=>{
		if(res.total===wallpaperList.value.length) {
		  status.value = 'no-more'
		  return 
		} 
		wallpaperList.value.push(...res.data)
		searchForm.page ++
		status.value = 'more'
	})
  }
  
  onReachBottom(()=>{
	  getWallpaperList()
  })
  onLoad((e)=>{
	  title.value = e.name
	  if(e.id){
		  searchForm.classId = e.id
		 
	  }else{
		  type.value = e.type
	  }
	   getWallpaperList()
  })
</script>

<style lang="scss" scoped>
.classify-detail{
	
	
	.content{
		padding: 10rpx;
		display: grid;
		grid-gap: 10rpx;
		grid-template-columns: repeat(3,1fr);
		image{
			width: 100%;
			border-radius: 14rpx;
		}
	}
	.load-more {
	  padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
	}
}
</style>
